<script setup lang="ts">
// 支付金额分布
const props = defineProps({
  data: {
    type: Object,
  },
  date: {
    type: String,
  },
})
const dataSource = ref<any[]>([])
const columns = [
  {
    dataIndex: 'date',
    title: '日期',
    sorter: (a: any, b: any) => a.date - b.date,
  },
  {
    dataIndex: 'name',
    title: '支付金额',
    sorter: (a: any, b: any) => a.name - b.name,
  },
  {
    dataIndex: 'value',
    title: '客群占比',
    dataType: 'customRender',
    sorter: (a: any, b: any) => a.value - b.value,
    render: (text: any, record: any, index: any) => {
      return (text * 100).toFixed(2) + '%'
    }
  }
]
const calcDataSource = () => {
  dataSource.value = props.data?.price_preferData.data?.map((item: any) => {
    return {
      ...item,
      date: props.date,
    }
  })
}
watch(() => props.data, () => {
  calcDataSource()
}, {
  deep: true
})
onMounted(() => {
  calcDataSource()
})
watch(() => props.date, () => {
  calcDataSource();
})
</script>

<template>
  <base-table :scroll="{
    x: 500,
    y: 700
  }" :columns="columns" :data-source="dataSource" table-name="市场-行业客群-购买偏好-支付金额分布"
  >

  </base-table>
</template>

<style scoped>

</style>
